<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="#"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
          rel="external nofollow">
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="jquery.table2excel.js"></script>
</head>


<body>
 


<div id="app">
    <center>
        <div class="login-title">
            <a href="#" rel="extermal notollow" rel="external nofollow" class="mya1" id="mya"
               onclick="myonclick()">交货</a>
            <a href="#" rel="extermal nofollow" rel="external nofollow" class="mya2" id="myaa"
               onclick="myonclick1()">收货</a>
        </div>
    </center>
    <form>
        <div class="bnamefl">
            起始时间：
            <input type="date" id="startCreatetime" name="InitialTime" max="">

            结束时间：
            <input type="date" id="endCreatetime" name="EndTime" max="">
            <button onclick="A()" type="button">查询</button>

        </div>
    </form>


    <div class="table2excel">
        <input class="btn" type="button" value="点击导出">
        <table id='tabletest' width="100%" border="1" cellspacing="1" cellpadding="0">
                   
            <tr>
                <th width="230px">时间</th>
                           
                <th>合计</th>
                           
                <th>废玻璃</th>
                           
                <th>废金属</th>
                           
                <th>废纸张</th>
                           
                <th>废塑料</th>
                           
                <th>废旧衣服</th>
                           
                <th>其他</th>
                           
                <th>废旧家电</th>
                       
            </tr>
            <tr>
                <th class="initialTime"></th>
                <th class="total"></th>
                <th class="wasteGlass"></th>
                <th class="metalScrap"></th>
                <th class="wastePaper"></th>
                <th class="wastePlastics"></th>
                <th class="wasteClothes"></th>
                <th class="otherWastes"></th>
                <th class="wasteHouseholdAppliances"></th>
            </tr>
        </table>
    </div>

</div>
</body>
<script type="text/javascript">


    var M = "chaxunhuishou"


    //收货
    function myonclick() {
        //更换按钮样式
        document.getElementById("mya").classList.remove("newClassName1");
        document.getElementById("myaa").classList.remove("newClassName");
        M = "chaxunhuishou"
    }

    //交货
    function myonclick1() {
        //更换按钮样式
        document.getElementById("mya").classList.add("newClassName1");
        document.getElementById("myaa").classList.add("newClassName");
        M = "chaxunjiaohuo"
    }


    //控件，选择时间渲染数据
    function A() {

        var InitialTime = document.getElementById("startCreatetime").value
        var EndTime = document.getElementById("endCreatetime").value
        url = location.protocol + '//' + location.hostname + ':' + location.port + '/' + M + '?InitialTime=' + InitialTime + ' 00:00:00&EndTime=' + EndTime + ' 23:59:59';
        //debugger

        $.ajax({
                type: 'get',
                url: url,
                success: function (data) {
                    console.log(data);
                    $(".initialTime").html("初始时间" + data.time.initialTime + "结束时间" + data.time.endTime);
                    $(".total").html(data.total.toFixed(2));
                    $(".wasteGlass").html(data.wasteGlass.toFixed(2));
                    $(".metalScrap").html(data.metalScrap.toFixed(2));
                    $(".wastePaper").html(data.wastePaper.toFixed(2));
                    $(".wastePlastics").html(data.wastePlastics.toFixed(2));
                    $(".wasteClothes").html(data.wasteClothes.toFixed(2));
                    $(".otherWastes").html(data.otherWastes.toFixed(2));

                    $(".wasteHouseholdAppliances").html(data.wasteHouseholdAppliances);
                    onsole.log(data)
                },
                error: function (error) {
                    console.log(error, "请求失败");
                }
            }
        )
        console.log(M)
        console.log(url)
    }


    $(function () {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth() + 1 < 10 ? "0" + (now.getMonth() + 1) : (now.getMonth() + 1);
        var day = now.getDate() < 10
            ? "0" + now.getDate() : now.getDate();
        $("#startCreatetime").attr("max", year + "-" + month + "-" + day);
        $("#endCreatetime").attr("max", year + "-" + month + "-" + day);
    })


    //导出表格
    $(function () {
        $(".btn").click(function () {
            $(".table2excel").table2excel({
                // 不被导出的表格行的CSS class类
                exclude: ".noExl",
                // 导出的Excel文档的名称
                name: "Excel Document Name",
                // Excel文件的名称
                filename: "test",
                //文件后缀名
                fileext: ".xls",
                //是否排除导出图片
                exclude_img: false,
                //是否排除导出超链接
                exclude_links: false,
                //是否排除导出输入框中的内容
                exclude_inputs: false
            });
        });
    });


</script>

<style>
    #app {
        width: 700px;
        margin: 0 auto;
        border: 1px solid rgb(39, 36, 36);
        margin-top: 300px;

    }

    #startCreatetime {
        margin-right: 80px;
    }

    .btn {
        background-color: rgb(53, 81, 114);
        margin: 2px;
    }

    .login-title {


        height: 40px;

        margin: 0 auto;

        background-color: antiquewhite;

    }

    .mya2 {
        padding: 0 20px 10px 20px;

        color: #857a7a;

        font-size: 22px;

        text-decoration: none;

    }

    .mya1 {
        padding: 0 20px 10px 20px;

        color: #7F4A88;

        font-size: 22px;

        text-decoration: none;
        background-color: rgb(221, 231, 79);


    }

    .newClassName {
        padding: 0 20px 10px 20px;

        color: #7F4A88;

        font-size: 22px;

        text-decoration: none;
        background-color: rgb(221, 231, 79);


    }

    .newClassName1 {
        padding: 0 20px 10px 20px;

        color: #857a7a;


        font-size: 22px;

        text-decoration: none;

        background-color: antiquewhite;
    }
</style>

</html>